import React from 'react';
import 'expose?Tether!tether';
import 'imports?jQuery=jquery,Tether=tether!semantic-ui/dist/semantic.min.js';
// import 'styles/index.scss';
import 'semantic-ui/dist/semantic.min.css';


class Card extends React.Component {

  render() {

    const cardNode = this.props.cards.map((card) => {
      return (
        <div className="ui link cards">
          <div className="card">
            <div className="image">
              <img src={card.photo} alt="photo"/>
            </div>
            <div className="content">
              <div className="header">{card.head}</div>
              <div className="meta">
                <span>{card.anotherTitle}</span>
              </div>
              <div className="description">{card.description}</div>
            </div>
            <div className="extra content">
              <span className="right floated">{card.time}</span>
              <span><i className="user icon"></i>{card.friend}</span>
            </div>
          </div>
        </div>
      )
    });

    return(
      <div>
        {cardNode}
      </div>
    )
  }
}

const cards = [
  {
    key: 1,
    photo: "./favicon.ico",
    head: "我的朋友",
    anotherTitle: 'play with friend',
    description: '这是在海边的情景',
    time: '2016-16-17',
    friend: '76的朋友'
  },
  {
    key: 2,
    photo: "./favicon.ico",
    head: "我的朋友",
    anotherTitle: 'play with friend',
    description: '这是在海边的情景',
    time: '2016-16-17',
    friend: '76的朋友'
  }
];

class photoStyleOne extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Card cards={cards}/>
    )
  }
}

export default photoStyleOne;
